<template>
    <div style="padding: 10px">


      <!--    <div style="margin: 10px 0">

            <div>

              <el-input v-model="searchId" clearable placeholder="请输入课程编号以搜索" prefix-icon="el-icon-star-on"

                        style="width: 300px;margin-left: 15px"></el-input>

              <el-input v-model="searchName" clearable placeholder="请输入课程名称以搜索" prefix-icon="el-icon-s-flag"

                        style="width: 300px;margin-left: 15px"></el-input>

              <el-button icon="el-icon-search" plain size="large" type="success" @click="load">搜索</el-button>

              <el-button icon="el-icon-search" plain size="large" type="warning" @click="reset">重置</el-button>

            </div>

          </div>-->


      <!--表格事件-->

      <div class="home" style="margin: 10px">

        <el-table :data="tableData" :default-expand-all="true" :row-class-name="tableRowClassName"
                  header-cell-class-name="headerBg" size="medium" style="width: 100%"
                  @selection-change="handleSelectionChange">

          <el-table-column type="expand">

            <template slot-scope="props">

              <el-form class="demo-table-expand" inline label-position="left">

                <el-form-item label="开结课时间">

                  <span>{{ props.row.startEndTime }}</span>

                </el-form-item>

                <el-form-item label="上课时间">

                  <span>{{ props.row.goCourseTime }}</span>

                </el-form-item>

                <el-form-item label="上课地点">

                  <span>{{ props.row.classroomPlace }}</span>

                </el-form-item>

                <el-form-item label="本课学分">

                  <span>{{ props.row.courseCredit }}</span>

                </el-form-item>

                <el-form-item label="本课课时">

                  <span>{{ props.row.courseHour }}</span>

                </el-form-item>

              </el-form>
            </template>
          </el-table-column>
          <el-table-column
              label="课程编号"
              prop="courseId"
              sortable>
          </el-table-column>
          <el-table-column
              label="课程名"
              prop="courseName">
          </el-table-column>
          <el-table-column
              label="类型"
              prop="courseType">
          </el-table-column>
          <el-table-column
              label="课程归属院"
              prop="departmentName">
          </el-table-column>
          <el-table-column
              label="课程归属专业"
              prop="professionName">
          </el-table-column>
          <el-table-column
              label="授课教师"
            prop="teacherName">
        </el-table-column>

        <el-table-column
            label="已选人数"
            prop="courseChooseNumber">
        </el-table-column>
        <el-table-column
            label="班级容量"
            prop="classSeatNumber">
        </el-table-column>
        <!--        <el-table-column   label="已选/总容量">-->
        <!--          <el-tag type="success" >-->
        <!--            {{this.tag }}-->
        <!--          </el-tag>-->
        <!--        </el-table-column>-->

      </el-table>

      <div style="margin: 10px 0">
        <el-pagination
            :current-page="currentPage"
            :page-size="pageSize"
            :page-sizes="[5, 7,10, 20]"
            :total="total"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange">
        </el-pagination>

      </div>
    </div>

  </div>
</template>

<script>
import request from '@/utils/request';
export default {
  name: "Class",
  components: {},

  //页面初始方法  调用生命周期
  created() {
    this.load()
  },
  methods: {

    reset() {
      this.searchId = '';
      this.searchName = '';
      this.load()
    },

    handleSelectionChange(val) {
      this.multipleSelection = val;

    },

    handleSizeChange(val) {
      this.pageSize = val
      this.load()
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.load()
      console.log(`当前页: ${val}`);
    },

    load() {
      request.get("/userteacher/teachercourse", {
        params: {
          pageNum: this.currentPage,
          pageSize: this.pageSize,
          teacherId: JSON.parse(localStorage.getItem("user")).userId,
          searchId: this.searchId,
          searchName: this.searchName
        }
      }).then(res => {
        this.tableData = res.records
        this.total = res.total
        console.log(res.records)
        for (let i = 0; i < this.tableData.length; i++) {

          this.tag = this.tableData[i].courseChooseNumber + "/" + this.tableData[i].classSeatNumber
        }
      })
    },

    tableRowClassName({row, rowIndex}) {
      if (rowIndex == 0) {
        return 'warning-row';
      } else if (rowIndex % 2 == 0) {
        return 'success-row';
      }
      return '';
    },
  },
  data() {
    return {
      user: JSON.parse(localStorage.getItem("user")),
      tag: 1,
      showChooseCourse: true,
      showReturnCourse: true,

      multipleSelection: [],
      tableData: [],
      searchId: '',
      searchName: '',
      pageSize: 7,
      total: 10,
      currentPage: 1,
      visible: false,
      addDialogFormVisible: false,
      editDialogFormVisible: false,
      dynamicValidateForm: {
        domains: [{}],
      },
      form: {
        courseId: "",
        courseName: "",
        courseChooseNumber: '',
        startEndTime: '',
        goCourseTime: '',
        courseCredit: '',
        courseHour: ''
      },
    };
  }

}
</script>

<style>
.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}

.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}

.headerBg {
  background: #eee !important;
}
</style>
